<template>
  <div>
    <!-- 搜索框 -->
    <a-card :bordered="false">
      <div class="search-box">
        <h2 class="text-lg">搜索列表（预约）</h2>
        <div class="text-center mt-4">
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="请输入关键字"
            size="large"
            search-button
          />
        </div>
      </div>
    </a-card>

    <!-- 应用部分 start -->
    <div class="mt-4 tab3">
      <!-- 分类 -->
      <a-card :bordered="false" class="mb-4">
        <div class="flex items-start classification justify-between mt-2.5">
          <a-space direction="vertical" :style="{ width: '100%' }" size="large" v-if="loading">
            <a-skeleton-line :rows="1" />
          </a-space>
          <template v-else>
            <div class="label flex-none">分类: </div>
            <div class="flex-grow">
              <a-space wrap size="small" :class="!isCollapse ? 'height-limited' : ''">
                <a-tag
                  size="large"
                  v-for="(item, index) in categoryListData"
                  :key="index"
                  @click="selectedHandle(index)"
                  :class="categoryIndex != index ? 'noSelected' : ''"
                  >{{ item.name }}</a-tag
                >
              </a-space>
            </div>
            <div
              class="collapse-btn flex items-center justify-end flex-none primary-6 flex-none cursor-pointer"
              @click="collapseHandle"
              >{{ isCollapse ? '收起' : '展开' }}
              <icon-up class="ml-1" v-if="isCollapse" /><icon-down class="ml-1" v-else
            /></div>
          </template>
        </div>
        <div class="flex items-start justify-between classification mt-5">
          <div class="label flex-none">排序:</div>
          <div class="flex-grow mt-1">
            <a-radio-group default-value="1">
              <a-radio value="1">最新</a-radio>
              <a-radio value="2">最热</a-radio>
            </a-radio-group>
          </div>
        </div>
      </a-card>

      <!-- 应用列表 -->
      <a-row :gutter="[15, 15]" class="list">
        <a-col
          :xs="12"
          :sm="12"
          :md="8"
          :lg="8"
          :xl="6"
          :xxl="4"
          v-for="item in makeListData"
          :key="item.id"
        >
          <a-card :bordered="false" class="card">
            <div class="flex items-center px-4">
              <a-avatar :size="40"><img alt="avatar" :src="item.avatar" /></a-avatar>
              <span class="text-base ml-2">{{ item.doctor }} 医师</span>
            </div>
            <dl class="my-4 px-4 c-gray">
              <dt>科室：{{ item.subject }}</dt>
              <dd>最后预约时间：{{ item.date }}</dd>
            </dl>
            <a-divider />
            <a-row class="grid-box">
              <a-col :span="6">
                <a-tooltip content="查看">
                  <div class="wrap flex items-center justify-center"
                    ><a href="https://www.naiveadmin.com/home" target="_blank"
                      ><icon-eye class="text-base" /></a
                  ></div>
                </a-tooltip>
              </a-col>
              <a-col :span="6" class="flex items-center justify-center">
                <a-tooltip content="导出">
                  <div class="wrap flex items-center justify-center"
                    ><icon-export class="text-base"
                  /></div>
                </a-tooltip>
              </a-col>
              <a-col :span="6" class="flex items-center justify-center">
                <a-tooltip content="编辑">
                  <div class="wrap flex items-center justify-center"
                    ><icon-edit class="text-base"
                  /></div>
                </a-tooltip>
              </a-col>
              <a-col :span="6" class="flex items-center justify-center">
                <a-dropdown trigger="hover">
                  <div class="wrap flex items-center justify-center"
                    ><icon-delete class="text-base"
                  /></div>
                  <template #content>
                    <a-doption>
                      <template #default>删除</template>
                    </a-doption>
                    <a-doption>
                      <template #default>隐藏</template>
                    </a-doption>
                  </template>
                </a-dropdown>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>

      <!-- 加载更多 -->
      <a-card :bordered="false" class="text-center mt-4">
        <a-button :loading="loadingMore" @click="loadMore">加载更多</a-button>
      </a-card>
    </div>
    <!-- 应用部分 end -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { categoryList } from '@/api/comtemp/category';
  import { makeList } from '@/api/comtemp/make';

  const loading = ref(true);
  const categoryIndex = ref(-1);
  const isCollapse = ref(false);
  const categoryListData = ref();
  const makeListData = ref();
  const pageSize = ref(12);
  const loadingMore = ref(true);

  //获取分类列表
  async function getCategoryList() {
    const res = await categoryList();
    categoryListData.value = res && res.list ? res.list : [];
    loading.value = false;
  }

  //分类选中
  function selectedHandle(index) {
    categoryIndex.value = index;
  }

  //是否展开
  function collapseHandle() {
    isCollapse.value = !isCollapse.value;
  }

  //获取预约列表
  async function getMakeList() {
    const res = await makeList({ pageSize: pageSize.value });
    makeListData.value = res && res.list ? res.list : [];
    loadingMore.value = false;
  }

  //加载更多
  function loadMore() {
    loadingMore.value = true;
    pageSize.value = pageSize.value + 12;
    getMakeList();
  }

  onMounted(() => {
    //获取分类
    getCategoryList();
    //获取预约
    getMakeList();
  });
</script>

<style lang="less" scoped>
  .radius-10 {
    border-radius: 10px;
    overflow: hidden;
  }

  .c-gray {
    color: var(--color-text-3);
  }

  //分类
  .classification {
    .label,
    .collapse-btn {
      height: 32px;
      font-size: 14px;
      line-height: 30px;
    }
    .label {
      width: 60px;
    }
    .collapse-btn {
      width: 60px;
    }
    .height-limited {
      height: 40px;
      overflow: hidden;
    }
    .arco-tag {
      cursor: pointer;
    }
    .arco-tag.noSelected {
      background-color: transparent;
    }
  }

  //预约
  .tab3 {
    .list {
      .card :deep(.arco-card-body) {
        padding: 16px 0 0;
        .arco-divider {
          margin-bottom: 0;
        }
        .grid-box {
          .arco-col {
            height: 60px;
            padding: 8px 0;
            .wrap {
              position: relative;
              width: 100%;
              height: 100%;
              cursor: pointer;
              &::before {
                content: '';
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                width: 1px;
                background-color: var(--color-border);
              }
            }
            &:last-child .wrap {
              &::before {
                content: none;
              }
            }
          }
        }
      }
      .card:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px;
      }
    }
  }
</style>
